import React from 'react';
import { Route, HashRouter, Routes } from 'react-router-dom';
import { observer } from 'mobx-react-lite';
import { getRouteConfig } from './route-config';
import { routeMenuStructuredData } from '@config/perms/perms-config';
import { uiData } from '@/store';

/*
重新生成路由树函数;
基于route-config, 实现以下2点功能
1)将没有权限的路由剔除
2)将菜单格式的配置打平 (如果是子路保持子路由格式不变)

返回新的routesTree
@param authRoutes配置好的结构化的路由菜单数据
@param frontCodeList 后端返回的资源码列表(权限数据)
@param targetRoutes 如果是子菜单配置的话，需要将路由push到targetRoutes数组里
*/
const getRealRoutesConfig = (authRoutes: PermItem[], frontCodeList, targetRoutes?) => {
    for (let i = 0; i < authRoutes.length; i++) {
        const item = { ...authRoutes[i] };
        const path = item.path;
        /*
        有path一定是路由; 没有path一定不是路由，是目录
        */
        if (path) {
            if (!frontCodeList.includes(item.permsKey) && item.needValid) {
                authRoutes.splice(i, 1);
                i--;
            } else {
                if (targetRoutes) {
                    targetRoutes.push(item);
                }
                //检测是否有  子路由
                if (item.children && item.children.length > 0) {
                    getRealRoutesConfig([...item.children], frontCodeList);
                }
            }
        } else {
            //这是菜单目录，不是路由不能要
            authRoutes.splice(i, 1);
            i--;
            // 菜单页面的路由要添加到路由的上一次层,因为他的，父级点没有用到
            if (item.children && item.children.length > 0) {
                getRealRoutesConfig([...item.children], frontCodeList, authRoutes);
            }
        }
    }
    return getRouteConfig(authRoutes);
};

// observer为了响应
export default observer(() => {
    const frontCodeList = uiData.frontCodeList;

    const getComponent = (Comp) => {
        const loadingStyle = { height: '400px', margin: '0 0 0 45%', lineHeight: '400px' };
        return (
            <React.Suspense fallback={<div style={loadingStyle}>页面加载中...</div>}>
                <Comp />
            </React.Suspense>
        );
    };

    const getRoutes = (childrenRoutes: RouteItemProps[]) => {
        const routeItemArr = [];
        childrenRoutes.forEach(({ component, path, children, isIndex }, index) => {
            // 没有子路由
            if (!children || children.length === 0) {
                //多存一份route,默认index=0是isIndex是true
                if (isIndex || index === 0) {
                    routeItemArr.push(<Route key={path + '_index'} index element={getComponent(component)} />);
                }
                routeItemArr.push(<Route key={path} path={path} element={getComponent(component)} />);
            } else if (children?.length > 0) {
                // 有子路由, route嵌套route
                routeItemArr.push(
                    <Route key={path} path={path} element={getComponent(component)}>
                        {getRoutes(children)}
                    </Route>,
                );
            }
        });
        return routeItemArr;
    };

    const AppRouter = HashRouter;
    const realRoutesConfig = getRealRoutesConfig([...routeMenuStructuredData], frontCodeList);
    const authedRoutes = getRoutes(realRoutesConfig);

    return (
        <AppRouter basename={window.__POWERED_BY_QIANKUN__ ? '/auth/smartDC' : '/'}>
            <Routes>{authedRoutes}</Routes>
        </AppRouter>
    );
});
